<html lang="en-gb" dir="ltr" class="uk-touch">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Portfolio layout example - UIkit documentation</title>
        <link rel="shortcut icon" href="http://getuikit.net/docs/images/favicon.ico" type="image/x-icon">
        <link rel="apple-touch-icon-precomposed" href="http://getuikit.net/docs/images/apple-touch-icon.png">
        <link rel="stylesheet" href="css/uikit.docs.min.css">
        <script src="js/jquery.1.9.js"></script>
        <script src="js/uikit.min.js"></script>
        <style type="text/css">
            .showPic{
                width: 256px;
                height: 224px;
            }
        </style>
    </head>

    <body>

        <div class="uk-container uk-container-center uk-margin-top uk-margin-large-bottom">
        <div class="uk-grid" style="height:300px;" >
            <div class="uk-width-3-4" style=" background-color: #19a" >
                <h1 style="" >某某某的主页</h1>
                
                <form class="uk-form">
                    <fieldset data-uk-margin>
                        <legend><h1 style="" >某某某的主页</h1></legend>
                        <input type="text" placeholder="">
                        <select>
                            <option>全部</option>
                            <option>搜索照片</option>
                            <option>搜索用户</option>
                        </select>
                        <button class="uk-button">搜索</button>
                        <!-- <label><input type="checkbox"> ...</label> -->
                    </fieldset>

                </form>
            </div>
            <div class="uk-width-1-4" style=" background-color: #a19" >
                <a class="uk-thumbnail" href="">
                    <img src="a.jpg" alt="" class="showPic" >
                    <div class="uk-thumbnail-caption">我的空间</div>
                </a><br>
                <button class="uk-button">上传照片</button>
            </div>
        </div>

        <h2>关注用户照片</h2>
        <div class="uk-grid" >
            
            <div class="uk-width-1-4" >
                <img src="a.jpg" alt="" class="showPic" >
                <div class="uk-thumbnail-caption"></div>
                    <p>照片名称:小和尚的阳光</p>
                    <p>上传时间:2012-3-16</p>
                    <p>上传人:小小飞</p><br>
            </div>
            <div class="uk-width-1-4" >
                <img src="a.jpg" alt="" class="showPic" >
                <div class="uk-thumbnail-caption"></div>
                    <p>照片名称:小和尚的阳光</p>
                    <p>上传时间:2012-3-16</p>
                    <p>上传人:小小飞</p><br>
            </div>
            <div class="uk-width-1-4" >
                <img src="a.jpg" alt="" class="showPic" >
                <div class="uk-thumbnail-caption"></div>
                    <p>照片名称:小和尚的阳光</p>
                    <p>上传时间:2012-3-16</p>
                    <p>上传人:小小飞</p><br>
            </div>
            <div class="uk-width-1-4" >
                <img src="a.jpg" alt="" class="showPic" >
                <div class="uk-thumbnail-caption"></div>
                    <p>照片名称:小和尚的阳光</p>
                    <p>上传时间:2012-3-16</p>
                    <p>上传人:小小飞</p><br>
            </div>
            <div class="uk-width-1-4" >
                <img src="a.jpg" alt="" class="showPic" >
                <div class="uk-thumbnail-caption"></div>
                    <p>照片名称:小和尚的阳光</p>
                    <p>上传时间:2012-3-16</p>
                    <p>上传人:小小飞</p><br>
            </div>
            <div class="uk-width-1-4" >
                <img src="a.jpg" alt="" class="showPic" >
                <div class="uk-thumbnail-caption"></div>
                    <p>照片名称:小和尚的阳光</p>
                    <p>上传时间:2012-3-16</p>
                    <p>上传人:小小飞</p><br>
            </div>
            <div class="uk-width-1-4" >
                <img src="a.jpg" alt="" class="showPic" >
                <div class="uk-thumbnail-caption"></div>
                    <p>照片名称:小和尚的阳光</p>
                    <p>上传时间:2012-3-16</p>
                    <p>上传人:小小飞</p><br>
            </div>
            <div class="uk-width-1-4" >
                <img src="a.jpg" alt="" class="showPic" >
                <div class="uk-thumbnail-caption"></div>
                    <p>照片名称:小和尚的阳光</p>
                    <p>上传时间:2012-3-16</p>
                    <p>上传人:小小飞</p><br>
            </div>
        </div>
        <ul class="uk-pagination">
                <li><a href="">上一页</a></li>
                
                <li><a href="">下一页</a></li>
        </ul>

        <hr>
        <h2>最新上传的照片</h2>
        <div class="uk-grid" >
            
            <div class="uk-width-1-4" >
                <img src="a.jpg" alt="" class="showPic" >
                <div class="uk-thumbnail-caption"></div>
                    <p>照片名称:小和尚的阳光</p>
                    <p>上传时间:2012-3-16</p>
                    <p>上传人:小小飞</p><br>
            </div>
            <div class="uk-width-1-4" >
                <img src="a.jpg" alt="" class="showPic" >
                <div class="uk-thumbnail-caption"></div>
                    <p>照片名称:小和尚的阳光</p>
                    <p>上传时间:2012-3-16</p>
                    <p>上传人:小小飞</p><br>
            </div>
            <div class="uk-width-1-4" >
                <img src="a.jpg" alt="" class="showPic" >
                <div class="uk-thumbnail-caption"></div>
                    <p>照片名称:小和尚的阳光</p>
                    <p>上传时间:2012-3-16</p>
                    <p>上传人:小小飞</p><br>
            </div>
            <div class="uk-width-1-4" >
                <img src="a.jpg" alt="" class="showPic" >
                <div class="uk-thumbnail-caption"></div>
                    <p>照片名称:小和尚的阳光</p>
                    <p>上传时间:2012-3-16</p>
                    <p>上传人:小小飞</p><br>
            </div>
            <div class="uk-width-1-4" >
                <img src="a.jpg" alt="" class="showPic" >
                <div class="uk-thumbnail-caption"></div>
                    <p>照片名称:小和尚的阳光</p>
                    <p>上传时间:2012-3-16</p>
                    <p>上传人:小小飞</p><br>
            </div>
            <div class="uk-width-1-4" >
                <img src="a.jpg" alt="" class="showPic" >
                <div class="uk-thumbnail-caption"></div>
                    <p>照片名称:小和尚的阳光</p>
                    <p>上传时间:2012-3-16</p>
                    <p>上传人:小小飞</p><br>
            </div>
            <div class="uk-width-1-4" >
                <img src="a.jpg" alt="" class="showPic" >
                <div class="uk-thumbnail-caption"></div>
                    <p>照片名称:小和尚的阳光</p>
                    <p>上传时间:2012-3-16</p>
                    <p>上传人:小小飞</p><br>
            </div>
            <div class="uk-width-1-4" >
                <img src="a.jpg" alt="" class="showPic" >
                <div class="uk-thumbnail-caption"></div>
                    <p>照片名称:小和尚的阳光</p>
                    <p>上传时间:2012-3-16</p>
                    <p>上传人:小小飞</p><br>
            </div>

        </div>

        <ul class="uk-pagination">
                <li><a href="">上一页</a></li>
                
                <li><a href="">下一页</a></li>
        </ul>


            
            
        

            

          
         
    </div>
     

      

    
</body></html>